<template>
    <div class="padding16">
        <van-icon style="font-size:20px;" :dot='false' class="margin-bottom20" v-if="!isVistor&&(!$route.query.data)" name="contact" @click="toMyCallback"/>
        <div class="font_big_title margin-bottom20">{{$route.query.data?'修改':'提交'}}反馈</div>
        <FormC :formObj='formObj' @childCormFun='childCormFun'>
            <template v-slot:date>
                <div class="margin-top12 flex-row title" @click="popShow">
                    <div class="font_big_title">{{formObj.date.title}}</div>
                    <div class="flex-row">
                        <div class="font_sub_title margin-right8">{{formObj.date.subTitle}}</div>
                        <img src="@/assets/img/more.png" alt="">
                    </div>
                </div>
            </template>
            <template v-slot:input>
                <div style="height:20px"></div>
            </template>
            <template v-slot:phone>
                <div style="height:20px"></div>
            </template>
            <template v-slot:uploader v-if="data">
                <div class="upImg">
                    <img v-for="(item,index) in data.imgList" :key="index" :src="item.imgContent" alt="">
                </div>
            </template>
        </FormC>
        <div class="btn flex-row">
            <ButtonC :btnDisabled='btnDisabled' @btnEvent='submit' name="提交" round="round" :color="color.colorObj.coloe377EF6"/>
        </div>
    </div>
</template>
<script>
import { ButtonC,FormC } from '@/components'
import color from '@/assets/style/color.js';
import commonFun from '@/utils/commonFun'
export default({
    props: ['upFormData'],
    data(){
        return {
            // show: false,
            checked: 'question', // 默认选中
            message: '',
            placeholder: '请描述您的问题',
            color: color,
            isVistor: JSON.parse(localStorage.getItem('userMsg')).user_type === 'vistor', // 判断是否是游客
            data: this.$route.query&&this.$route.query.data?JSON.parse(this.$route.query.data):null,
            // btnDisabled: true,
            formObj: {
                formList: [
                    {name:'RadioC',value: 'radio'},
                    {name:'InputC',value: 'input'},
                    {name:'UploaderC',value: 'uploader'},
                    {name:'InputC',value: 'phone'},
                    {name:'DateC',value: 'date'},
                ],
                input: {
                    name: 'input', 
                    rows: '4',
                    autosize: true,
                    type: 'textarea',
                    placeholder: '请描述您的问题',
                    required: true,
                    value: this.$route.query.data&&JSON.parse(this.$route.query.data).describes?JSON.parse(this.$route.query.data).describes:'',
                    hidden: false, // 是否隐藏
                },
                radio: {
                    name: 'radio',
                    iconSize: '14px',
                    direction:  'horizontal',
                    checked: this.$route.query.data&&JSON.parse(this.$route.query.data).type?JSON.parse(this.$route.query.data).type:'question',
                    radioList: [
                        {name: 'question', title: '遇到问题'},
                        {name: 'suggest', title: '使用建议'},
                    ],
                    hidden: false, // 是否隐藏
                },
                uploader: {
                    name: 'uploader',
                    maxSize: 10000000,
                    maxCount: 9,
                    hidden: false, // 是否隐藏
                },
                date: {
                    name: 'date',
                    minDate: new Date(2020, 0, 1),
                    maxDate: new Date(),
                    currentDate: this.$route.query.data&&JSON.parse(this.$route.query.data).date?new Date(JSON.parse(this.$route.query.data).date):new Date(),
                    subTitle: this.$route.query.data&&JSON.parse(this.$route.query.data).date?JSON.parse(this.$route.query.data).date:'',
                    title: '问题发生时间',
                    type: 'datetime',
                    popType: true, // 弹窗类型的
                    show: false, // 弹窗默认
                    popHelp: false, // 弹窗辅助变量，以便让watch监测到数据变化,
                    hidden: false, // 是否隐藏
                },
                phone: {
                    name: 'phone', 
                    placeholder: '手机号码/邮箱',
                    required: true,
                    value: this.$route.query.data&&JSON.parse(this.$route.query.data).phone?JSON.parse(this.$route.query.data).phone:'',
                },
            },
            formValObj: {}
        }
    },
    components: {
        ButtonC,FormC
    },
    computed: {
        // 必选项不为空时，按钮可用
        btnDisabled() {
            if((this.formValObj.input&&this.formValObj.input.value) && (this.formValObj.phone&&this.formValObj.phone.value)){
                return false
            }else{
                return true
            }
        }
    },
    mounted() {
        // if(this.$route.query&&this.$route.query.data)
        console.log(this.data)
    },
    methods: {
        // date弹窗
        popShow() {
            this.formObj.date.show = true
            this.formObj.date.popHelp = !this.formObj.date.popHelp
        },
        // form表单传回的值
        childCormFun(key,val){
            if(key == 'date'){
                this.formObj.date.subTitle = commonFun.timeFormat(val.value)
            }
            if(key == 'radio'){
                if(val.value == 'suggest'){
                    this.formObj.input.placeholder = '请提出您的建议'
                    this.formObj.date.hidden = true // 隐藏时间模块
                }else{
                    this.formObj.input.placeholder = '请描述您的问题'
                    this.formObj.date.show = false
                    this.formObj.date.hidden = false // 显示时间模块
                }
            }
            this.formValObj[key] = val
        },
        submit(){
            // console.log('表单内容',this.formValObj.uploader)
            let date =  (this.formValObj.date&&this.formValObj.date.value)?commonFun.timeFormat(this.formValObj.date.value):''
            let arr = []
            if(this.formValObj.uploader && this.formValObj.uploader.value){
                for (let item of this.formValObj.uploader.value) {
                    arr.push({
                        imgName: item.file.name,
                        imgContent: item.content
                        // imgContent: 'item.content'
                    })
                }
            }
            let args = {
                describes: this.formValObj.input.value,
                type: this.formValObj.radio.value,
                userId: JSON.parse(localStorage.getItem('userMsg')).user_id,
                phone: this.formValObj.phone.value,
                date: date,
                callbackImgList: arr,
                eventId: this.$route.query.data&&JSON.parse(this.$route.query.data).eventId?JSON.parse(this.$route.query.data).eventId:'',
            }
            // 判断是修改还是新增
            if(this.$route.query.data){
                this.$store.dispatch('updateCallBack', args).then(()=>{
                    this.$router.push({name: 'MyCalbackC'})
                })
            }else{
                this.$store.dispatch('insertCallBack', args).then(()=>{
                    this.$router.push({name: 'MyCalbackC'})
                })
            }
        },
        toMyCallback(){
            this.$router.push({name: 'MyCalbackC'})
        }
    }
})
</script>

<style lang="less" scoped>
@import '@/assets/style/style.less';
@import '@/assets/style/color.less';
@import '@/assets/style/font.less';
.describ{
    /deep/.van-cell{
        background: @color_border_f5;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }
}
/deep/.van-cell{
    background: @color_border_f5;
}
.contact{
    border-radius: 15px;
}
.btn{
    position: fixed;
    width: 100%;
    justify-content: center;
    margin-left: -16px;
    bottom: 80px;
    button{
        width: 90%;
    }
}
.title{
    img{
        width: 14px;
        height: 14px;
    }
    justify-content: space-between;
}
.upImg{
    img{
        width: 80px;
        height: 80px;
        margin: 1px;
    }
}
</style>